import React, { useCallback, useEffect, useState } from 'react'
import { history } from 'umi';
import style from './index.less'
import SRC from '@/images/supply/shopping.png'
import { Ellipsis, Footer } from 'antd-mobile'
import { getInformation } from '@/services/Publish'
export interface temGoodsDto {
    id: string,
    commodityName: string,
    updateTime: string,
    qualification: [],
    shipmentPlace: string,
    originPlace: string,
    minPrice: string,
    maxPrice: string,
    picture: string,
    quantity: number,
    description: string,
    userName: string,
    contactPhone: string,
    supportBilling:boolean,
}
type ParamValue = temGoodsDto;
interface Props {
    params?: Record<string, ParamValue | ParamValue[]>
}

export default (props: Props) => {
    const { params } = props
    const [goodsList, setGoodsList] = useState<temGoodsDto[]>([])

    const getData = useCallback(async () => {
        console.log(params);
        const res = await getInformation({ status: 0, ...params });
        setGoodsList(res)
    }, [params])

    useEffect(() => {
        getData()
    }, [params])
    return (
        <div>
            {goodsList.map((item) => (
                <div
                    key={item.id}
                    className={style['list-item']}
                    onClick={() => {
                        history.push(`detail?id=${item.id}`);
                    }}
                >
                    <div className={style['con-tt']}>
                        <img src={SRC} alt='SRC' />
                        <span>四级化肥批发</span>
                        <span className={style.business}>企业客户</span>
                        <span className={style.time}>{item?.updateTime}</span>
                    </div>
                    <div className={style.con}>
                        <div className={style['con-left']}>
                            {item?.picture ? (
                                <img src={item?.picture} alt="商品图片" />
                            ) : null}
                        </div>
                        <div className={style['con-right']}>
                            <div className={style.name}>
                                <Ellipsis direction='end' content={item?.commodityName} rows={2} />
                            </div>
                            <div className={style['con-title']}>
                                <span className={style['con-title-a']}>发货地</span>
                                <span className={style['con-title-b']}>{item?.shipmentPlace}</span>
                            </div>
                            <div className={style['con-title']}>
                                <span className={style['con-title-a']}>产地</span>
                                <span className={style['con-title-b']}>{item?.originPlace}</span>
                            </div>
                            <div className={style.money}>￥
                                <span className={style.price}>{item?.minPrice}-{item?.maxPrice}</span>
                            </div>
                        </div>
                    </div>
                </div>
            ))}

            <Footer
                content={goodsList.length > 0 ? (
                    '--我是有底线的--'
                ) : (
                    '暂无记录'
                )}
                className={style.footer}
            ></Footer>
        </div>
    )
}
